How to create Hover Interactions in Editor X using wixAnimation API | Editor X

Hello everyone! If you are like me, you might always be on the lookout for beautiful and eye-catching designs to inspire your next project. Recently, I came across a stunning menu animation that looked like the landing page of a spot shop or a restaurant. It caught my eye, and I immediately thought it would be a perfect example to demonstrate how to use Wix Animation API in Editor X. In this blog post, we'll take you through the process and, at the same time, invite you to join our community at Live Learning Editor X, where we host Monthly NoCode Design Challenges with Prizes!

Live Learning Editor X offers mentoring and helps designers grow their businesses and careers. By joining the community, you can take part in challenges, interact with like-minded individuals, and learn how to take your design career to new heights. So, without further ado, let's get started with building this fantastic menu animation!

Planning and Designing in Figma

Before we dive into building the animation in Editor X, let's make a plan and sketch out a rough layout of our design using Figma. Taking a look at our menu animation, we can see that we have a header, a section that fills the whole screen with a grid of content, and a footer.

!Menu Animation Screenshot

Now let's create a simple layout in Figma that mimics the screenshot. For our design, we will go with five columns since we want to include five content pieces. The columns will have a 1-pixel gutter to give a slight separation between the cells. To create this layout:

1. Open Figma and draw a canvas that resembles the screenshot dimensions.

2. Use the Layout Grid tool to create a grid with five columns and a 1-pixel gutter.

3. Set the header to be 60 pixels in height.

4. Fill the remaining space with rows for content.

Once you've set up the grid, we can start thinking about the hover interaction.

Creating Hover Interactions using wixAnimation API in Editor X

Now that we have a rough idea of our design layout, let's bring our animation to life in Editor X using wixAnimation API. Follow the steps below to create these impressive hover interactions:

1. Open Editor X and create a new site.

2. In the header, add a menu and customize it according to your preference.

3. Add a section that fills the entire screen using the Box tool.

4. In the new section, create a grid with five columns, just like our Figma layout. You can control the gutter sizes using Editor X's built-in options.

5. Add each content piece (imagery or text) in the grid's cells. To achieve a seamless hover effect, you can use the same background color for every cell.

6. Now, to start animating our design, we need to import the wixAnimation API. To do this, add a new code panel by clicking on 'Add' in the left toolbar and then choosing 'Code Panel' under the 'Development' category.

7. Import the wixAnimation API using the following line of code:

```javascript

import { wixAnimation } from 'wix-animations';

```

8. Next, we will target the content elements in our grid – in our case, images – and create hover interactions using the wixAnimation API. To do this, add the following code snippet in the code panel:

```javascript

const elements = $w('#grid').querySelectorAll('img');

elements.forEach((element) => {

element.onMouseIn(async () => {

await wixAnimation.timeline()

.add(element, { opacity: 1, scaleY: 1.05, scaleX: 1.05 }, { duration: 300, easing: "ease-out" })

.play();

});

element.onMouseOut(async () => {

await wixAnimation.timeline()

.add(element, { opacity: 0.7, scaleY: 1, scaleX: 1 }, { duration: 300, easing: "ease-in" })

.play();

});

});

```

This code targets all the images inside the grid, and when the user hovers over an image, it increases its opacity to 1 and enlarges its scale to 1.05. When the hover interaction ends, the animation reverts the image to its original state.

9. Preview your site and check how the hover interactions bring life to your design.

And that's it! You've successfully used the wixAnimation API to create impressive hover interactions in Editor X. Give yourself a pat on the back!

Join the Live Learning Editor X Community

If you found this tutorial helpful and want to take your design career to new heights, we invite you to join the Live Learning Editor X community. Participate in our Monthly NoCode Design Challenges with Prizes and interact with like-minded individuals passionate about design and building businesses. Let's grow together and make the design world a more vibrant and exciting place!

What are you waiting for? Showcase those newly acquired skills and create stunning and interactive websites in Editor X. Happy designing!